<template>
  <q-layout view="hHh lpR fFf">
    <q-header elevated class="bg-primary text-white">
      <div class="row items-center cc-bi-design-header">
        <div class="col-2">
          <q-toolbar>
            <q-toolbar-title>
              <q-avatar>
                <q-icon name="mdi-image-edit-outline" size="sm" />
              </q-avatar>
              <span class="text-subtitle1">{{name}}</span>
            </q-toolbar-title>
          </q-toolbar>
        </div>
        <div class="col">
          <div class="row no-warp justify-center items-center content-center">
            <div class="row">
              <div
                class="cc-bi-tool-box"
                :class="selectClass(v.type)"
                v-for="v in chartList"
                :key="v.type"
                @click="selectChartIcon(v.type)"
              >
                <q-icon size="sm" :name="v.icon" />
                <div>{{v.name}}</div>
              </div>
            </div>
            <q-space />
            <q-btn flat icon="mdi-auto-fix" :disable="layout.length === 0" @click="autoFix()">
              <q-tooltip>解决因为系统升级导致原有图形不能使用的问题</q-tooltip>
            </q-btn>
            <q-btn flat icon="mdi-undo" :disable="historyIndex === 0" @click="undo()">
              <q-tooltip>撤回</q-tooltip>
            </q-btn>
            <q-btn
              flat
              icon="mdi-redo"
              @click="redo()"
              class="q-mr-lg"
              :disable="historyIndex === history.length - 1|| history.length === 0"
            >
              <q-tooltip>重做</q-tooltip>
            </q-btn>
            <q-btn flat icon="mdi-content-cut" @click="cutItem()">
              <q-tooltip>剪切</q-tooltip>
            </q-btn>
            <q-btn flat icon="mdi-content-copy" @click="copyItem()">
              <q-tooltip>复制</q-tooltip>
            </q-btn>
            <q-btn flat icon="mdi-content-paste" @click="pasteItem()">
              <q-tooltip>粘贴</q-tooltip>
            </q-btn>
          </div>
        </div>
        <div class="row no-wrap justify-end col-3 text-right q-pr-md q-gutter-sm">
          <q-btn flat icon="mdi-folder-plus-outline" @click="addFav()">
            <q-tooltip>添加到收藏夹</q-tooltip>
          </q-btn>
          <q-btn flat icon="mdi-folder-star-outline" @click="fav()">
            <q-tooltip>收藏文件夹</q-tooltip>
          </q-btn>
          <q-btn flat icon="mdi-format-float-left" @click="left=!left">
            <q-tooltip>隐藏左侧菜单</q-tooltip>
          </q-btn>
          <q-btn flat icon="mdi-format-float-right" @click="right=!right">
            <q-tooltip>隐藏右侧菜单</q-tooltip>
          </q-btn>
          <q-btn flat icon="mdi-laptop" @click="viewScreen()">
            <q-tooltip>原尺寸查看</q-tooltip>
          </q-btn>
          <q-btn flat icon="mdi-desktop-mac-dashboard" @click="viewFullScreen()">
            <q-tooltip>全屏查看</q-tooltip>
          </q-btn>
          <q-btn flat icon="mdi-content-save" @click="saveScreen()">
            <q-tooltip>保存图形</q-tooltip>
          </q-btn>
        </div>
      </div>
    </q-header>

    <q-drawer show-if-above v-model="left" side="left" bordered :width="230">
      <div class="row no-wrap fit overflow-hidden">
        <layout
          :items.sync="layout"
          :selChartArray="selChartArray"
          :selChart="selChart"
          @selectItem="selectItem"
          @addItem="addItem"
          @cutItem="cutItem"
        />
      </div>
    </q-drawer>
    <q-drawer show-if-above v-model="right" side="right" bordered :width="590">
      <div class="row no-wrap fit overflow-hidden">
        <chartsetting v-if="selType === 'chart'" :config.sync="config" />
        <groupsetting v-if="selType === 'group'" :config.sync="config" />
        <backgroundsetting v-if="selType === 'cursor'" :config.sync="backgroundConfig" />
        <summarysetting v-if="selType === 'summary'" :config.sync="config" />
        <textsetting v-if="selType === 'text'" :config.sync="config" />
        <imagesetting v-if="selType === 'image'" :config.sync="config" />
        <bordersetting v-if="selType === 'border'" :config.sync="config" />
        <decorationsetting v-if="selType === 'decoration'" :config.sync="config" />
        <ranksetting v-if="selType === 'rank'" :config.sync="config" />
        <videosetting v-if="selType === 'video'" :config.sync="config" />
        <omnipotentsetting v-if="selType === 'omnipotent'" :config.sync="config" />
        <customsetting v-if="selType === 'custom'" :config.sync="config" />
        <charthousesetting v-if="selType === 'charthouse'" :config.sync="config" />
        <datasource :config.sync="config" />
      </div>
    </q-drawer>

    <q-page-container>
      <q-page class="cc-admin column cc-admin-bi">
        <!-- container 容器窗口负责提供滚动条，以及可视区域 -->
        <div id="container" ref="main" class="container col">
          <!-- canvas是画布 -->
          <div
            ref="main"
            class="canvas"
            id="canvas"
            :style="backgroundStyle"
            @mousedown="startDraw"
            @mousemove="drawing"
            @mouseup="endDraw"
          >
            <div ref="draw" class="draw-div" v-show="showDrawing"></div>
            <vue-draggable-resizable
              v-for="item in layout"
              :key="item.i"
              :x="item.x"
              :y="item.y"
              :w="item.w"
              :h="item.h"
              :z="item.z"
              :parent="true"
              :class="selChartArray.indexOf(item)>-1?'grid-item-select':'no-border'"
              :grid="[1,1]"
              :draggable="!dragging&&(item.config.fixedFreeze===false)"
              :resizable="!dragging&&(item.config.fixedFreeze===false)"
              @resizestop="resizedEvent"
              @activated="selectItem(item)"
              @deactivated="item.active=false"
              @dragging="onDrag"
            >
              <div
                :class="getItemClass(item)"
                :id="item.key"
                @click="selectItem(item)"
                @dragenter.prevent
              >
                <textview v-if="item.type === 'text'" :config="item.config" />
                <imageview v-if="item.type === 'image'" :config="item.config" />
                <borderview v-if="item.type === 'border'" :config="item.config" />
                <decorationview v-if="item.type === 'decoration'" :config="item.config" />
                <rankview v-if="item.type === 'rank'" :config="item.config" />
                <chartview v-if="item.type === 'chart'" :config="item.config" />
                <videoview v-if="item.type === 'video'" :config="item.config" />
                <groupview v-if="item.type === 'group'" :config="item.config" />
                <omnipotentview v-if="item.type === 'omnipotent'" :config="item.config" />
                <customview v-if="item.type === 'custom'" :config="item.config" />
                <charthouseview v-if="item.type === 'charthouse'" :config="item.config" />
              </div>
            </vue-draggable-resizable>
          </div>
        </div>
        <q-dialog maximized flat persistent ref="favoriteDialog">
          <q-form class="dialog_card column">
            <h5 class="view_title justify-between q-px-md">
              收藏夹
              <q-btn dense outline round icon="clear" size="sm" v-close-popup />
            </h5>
            <q-scroll-area class="col">
              <favorite @addFavorite="addFavorite" />
            </q-scroll-area>
            <div class="row justify-center q-pa-md">
              <q-btn outline color="primary" icon="mdi-close-thick" label="关闭" v-close-popup />
            </div>
          </q-form>
        </q-dialog>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<script>
import { debounce } from 'quasar';
import { BiMixin } from 'boot/mixins/bi';

export default {
  mixins: [BiMixin],
  components: {

  },
  data() {
    return {
    };
  },
  methods: {
  },
  created() {
    // 这里监听所有请求参数
    this.$root.$on('paramChange', this.paramChange);
  },
  mounted() {
    if (this.$route.query.id) {
      this.getScreen();
    } else {
      this.config.data.name = '新建组件 ';
      this.changeClientSize();
    }
    document.onkeydown = (e) => {
      this.setKeyStatus(e, true);
    };
    document.onkeyup = (e) => {
      this.setKeyStatus(e, false);
    };
    this.moveItem = debounce(this.doMoveItem, 1);
    this.sizeResize = debounce(this.doSizeResize, 1);
    this.onDrag = debounce(this.doOnDrag, 1);
  },
  computed: {
    backgroundStyle() {
      const bkStyle = { width: `${this.backgroundConfig.width}px`, height: `${this.backgroundConfig.height}px`, transform: `scale(${this.clientScale},${this.clientScale})` };
      if (this.backgroundConfig.src) {
        bkStyle.background = `url('${this.imgUrl}/${this.backgroundConfig.src}')`;
        bkStyle.backgroundRepeat = this.backgroundConfig.backPicSet;
        if (this.backgroundConfig.backPicSet === 'stretch') {
          bkStyle.backgroundSize = '100% 100%';
        } else {
          delete bkStyle.backgroundSize;
        }
      } else {
        bkStyle.background = this.backgroundConfig.color;
        bkStyle.backgroundSize = '10px 10px';
        bkStyle.backgroundImage = this.backgroundConfig.showGrid
          ? 'linear-gradient(90deg, #f2f2f2 10%, rgba(0, 0, 0, 0) 10%),'
          + 'linear-gradient(#f2f2f2 10%, rgba(0, 0, 0, 0) 10%)' : '';
      }
      return bkStyle;
    },
  },
  watch: {
  },
};
</script>

<style lang="stylus">
@import '~src/css/quasar.variables.styl'
@import '~src/css/app.styl'

.cc-admin-bi
  .container
    overflow auto
    position relative
    box-sizing border-box
    background url('/img/bi/screen.png') repeat
  .canvas
    position absolute
.cc-bi-design-header
  height 60px
.cc-bi-tool-box
  flex-direction column
  align-items center
  text-align center
  cursor pointer
  padding 0px 10px 0px 10px
  div
    font-size 5px
.cc-bi-select-tool
  background-color #0e47a1
.draw-div
  position absolute
  z-index 100000
  height 0px
  width 0px
  left 0px
  top 0px
  color #000
  border-style dashed
  border-width 2px
  border-color #00bfff
  touch-action none
.draggable-item-class
  overflow hidden
  height 100%
.ul-box-tool
  list-style none
  width 40px
  height 30px
  cursor pointer
.w_l_list
  >div
    padding 8px
    cursor pointer
    >.col
      padding-right 8px
      word-break break-all
  .w_l_cat:hover
    background $primary-light
  .w_l_val:hover
    background $positive-light
</style>
